<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>数据</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<style type="text/css">
			html,
			body,
			#pullrefresh,
			.mui-content {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			
			.mui-content {
				background: url(../images/2.png) center no-repeat;
				background-size: 100% auto;
			}
			
			.msg {
				padding: 20px 10px;
				line-height: 2;
				font-size: 3.5vw;
				color: #fff;
			}
			
			input.deviceNo::-webkit-input-placeholder {
				font-size: 14px;
				text-align: left;
				color: #F8F8F8;
			}
			
			.gridBox ul,
			.gridBox ul li,
			.mui-media-body {
				background: none !important;
				border: none !important;
				color: #f8f8f8 !important;
			}
			
			.gridBox ul li a {
				padding: 4vw 0 !important;
				background: rgba(12, 66, 123, 0.35) !important;
				border-radius: 6px;
			}
			
			.getDeviceNo {
				margin-top: 20px;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: -1px;
			}
			
			#pullrefresh {
				overflow-x: hidden;
			}
			
			.click,
			.scan {
				text-align: center;
				float: left;
				width: 50%;
			}
			
			.gridBox {
				display: none;
				padding-top: 120px;
			}
			
			.deviceCheck {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				background: rgba(255, 255, 255, 0.1);
			}
			
			.deviceCheck div,
			.deviceCheck input,
			.deviceCheck li,
			.deviceMsg {
				background: none;
				color: #f8f8f8;
			}
			.deviceMsg{
				text-align: center;
				line-height: 1.4;
			}
			
			.mui-table-view-cell:after{
				left: 0;
			}
		</style>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<div class="">
					<div class="gridBox">
						<p class="deviceMsg">
									
						</p>
						<ul class="mui-table-view mui-grid-view mui-grid-9">
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="display: none;">
								<a href="">
									<span class="mui-icon mui-icon-home"></span>
									<div class="mui-media-body">货柜管理</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="">
									<span class="mui-icon mui-icon-email">
										<span class="mui-badge" style="display: none;">5</span>
									</span>
									<div class="mui-media-body">补货</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="display: none;">
								<a href="#">
									<span class="mui-icon mui-icon-chatbubble"></span>
									<div class="mui-media-body">商品管理</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="display: none;">
								<a href="#">
									<span class="mui-icon mui-icon-location"></span>
									<div class="mui-media-body">推送管理</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="display: none;">
								<a href="#">
									<span class="mui-icon mui-icon-search"></span>
									<div class="mui-media-body"></div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="display: none;">
								<a href="#">
									<span class="mui-icon mui-icon-phone"></span>
									<div class="mui-media-body"></div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="display: none;">
								<a href="#">
									<span class="mui-icon mui-icon-gear"></span>
									<div class="mui-media-body"></div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="display: none;">
								<a href="#">
									<span class="mui-icon mui-icon-info"></span>
									<div class="mui-media-body"></div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" style="display: none;">
								<a href="view.html">
									<span class="mui-icon mui-icon-more"></span>
									<div class="mui-media-body"></div>
								</a>
							</li>
						</ul>
						<!--<div class="msg">
						Vending machine background system
						<br /> 售货机后台系统
						<br /> 高效 快捷 稳定
					</div>-->
					</div>

					<div class="getDeviceNo">
						<ul class="mui-table-view deviceCheck">
							<div class="mui-input-row mui-table-view-divider">
								<label>设备号：</label>
								<input type="hidden" class="mui-input-clear deviceType">
								<input type="text" class="mui-input-clear deviceNo" placeholder="请先输入/选取/扫一扫获取二维码">
							</div>
							<li class="mui-table-view-cell click">选取 </li>
							<li class="mui-table-view-cell scan">扫一扫 </li>
						</ul>
					</div>

				</div>
			</div>

		</div>

		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle',
						callback: pulldownRefresh
					},

				}
			});

			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					console.log("正在刷新");
					jQuery(".deviceNo").val("");
					localStorage.removeItem("qrcode");
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui.toast("刷新成功。。。");
				}, 1500);
			}

			jQuery('body .gridBox li').click(function() {
				console.log(jQuery(this).index());
				if(jQuery(".deviceNo").val()) {
					switch(jQuery(this).index()) {
						case 0:
							mui.openWindow({
								url: 'pages/regulate.html',
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								},
								extras: {
									data: jQuery(".deviceNo").val(),
									type: jQuery(".deviceType").val()
								}
							});
							break;
						case 1:
							mui.openWindow({
								url: 'view.html',
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								},
								extras: {
									data: jQuery(".deviceNo").val(),
									type: jQuery(".deviceType").val()
								}
							});
							break;
						default:
							break;
					}

				} else {
					mui.alert("请先输入或选取或扫一扫获取设备号后，再执行该操作")
				}

			});

			mui.plusReady(function() {

				//				plus.screen.lockOrientation("portrait-primary");				
				//				nav切换

				console.log("ready");

				mui('body').on('tap', '.scan', function() {
					mui.openWindow({
						url: 'qrcode.html',
						show: {
							aniShow: 'pop-in'
						},
						waiting: {
							autoShow: false
						},
						extras: {
							data: ""
						}
					});
				});
				//				获取扫码返回的二维码
				window.addEventListener('scanMsg', function(e) {
					var deviceNum = localStorage.getItem("qrcode");
					getdeviceType(deviceNum);
					localStorage.removeItem("qrcode")
				});

				function getdeviceType(deviceNum) {
					var deviceData = localStorage.getItem("deviceData");
					if(deviceData) {
						deviceData = JSON.parse(deviceData);
					} else {

						mui.ajax(url + "/app/device/query?token=" + localStorage.getItem("token"), {
							data: {},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							headers: {
								'Content-Type': 'application/json'
							},
							success: function(data) {
								//服务器返回响应，根据响应结果，分析是否登录成功；
								console.log(JSON.stringify(data));
								if(data.code == 0) {
									deviceMsg = data.data;
									var deviceNum = data.data.length;
									deviceData = [];
									deviceData[0] = {};
									deviceData[0].value = "1";
									deviceData[0].text = "弹簧柜";
									deviceData[0].children = [];
									deviceData[1] = {};
									deviceData[1].value = "2";
									deviceData[1].text = "RFID柜";
									deviceData[1].children = [];
									deviceData[2] = {};
									deviceData[2].value = "3";
									deviceData[2].text = "重力柜";
									deviceData[2].children = [];
									for(var i = 0; i < deviceNum; i++) {
										if(data.data[i].type == 1) {
											deviceData[0].children.push({
												value: data.data[i].number,
												text: data.data[i].number
											});
										} else if(data.data[i].type == 2) {
											deviceData[1].children.push({
												value: data.data[i].number,
												text: data.data[i].number
											});
										} else if(data.data[i].type == 3) {
											deviceData[2].children.push({
												value: data.data[i].number,
												text: data.data[i].number
											});
										}
									};
								} else if(data.code == 500 && data.msg == "令牌已经失效,请重新登录") {
									plus.nativeUI.toast('登录信息已过期，请重新登录');
									mui.openWindow({
										url: 'login.html',
										show: {
											autoShow: true
										}
									});
								} else {
									alert(data.msg);
									return;
								}
							},
							error: function(xhr, type, errorThrown) {
								//异常处理；
								console.log(type);
								plus.nativeUI.toast('网络连接错误，请重新登录');
								mui.openWindow({
									url: 'login.html',
									show: {
										autoShow: true
									}
								});
							}
						});
					}

					jQuery(".deviceNo").val(deviceNum);
					for(var i = 0; i < deviceData.length; i++) {
						for(var j = 0; j < deviceData[i].children.length; j++) {
							if(deviceNum == deviceData[i].children[j].value) {
								jQuery(".deviceType").val(deviceData[i].text);
								jQuery('.deviceMsg').html(deviceData[i].text + ":" + deviceNum);
								jQuery('.gridBox').show();
							} else {
								mui.toast("无此设备，请确认后重新输入");
								jQuery('.deviceNo').val('');
								jQuery('.deviceNo').trigger("focus");
							}
						}
					}
				}
				jQuery(".click").click(function() {
					var picker = new mui.PopPicker({
						layer: 2
					});
					picker.setData(JSON.parse(localStorage.getItem("deviceData")))
					picker.pickers[0].setSelectedIndex(0, 1000);

					picker.show(function(SelectedItem) {
						console.log(JSON.stringify(SelectedItem[0]))
						var deviceType = SelectedItem[0].text;
						var deviceNo = SelectedItem[1].value;
						jQuery(".deviceNo").val(deviceNo);
						jQuery(".deviceType").val(deviceType);
						jQuery('.deviceMsg').html(deviceType + ":" + deviceNo);
						jQuery('.gridBox').show();
					})
				})
				jQuery(".deviceNo").blur(function() {
					var deviceNum = jQuery(this).val();

					getdeviceType(deviceNum);
				})

			})
		</script>
	</body>

</html>